現在已有vue cli 3，影片是介紹 cli 2 的版本，之後再補充 cli 3的觀念

cli

優勢：便於開發SPA的網頁
參考：medium Huli 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR

如何使用(有免費影片)

1.安裝 node.js，選擇左邊LTS版本，右邊是最新版本，不建議初學者使用
2.到 vue-cli GitHub 有說明如何安裝，我們可以看到這份文件有標示 vue-cli 這個指令在最新版本已棄用，新版使用 @vue/cli。我們跟著影片使用 vue-cli 就好
3.中間若有輸入密碼的步驟不會顯示'*'字樣但確實是有在輸入，輸入後按下enter。
4.裝完之後輸入指令 vue list 可以查看 template-name 的選項
5.再輸入指令vue init <template-name> <project-name>，這邊我們template選用webpack
6.Vue build選內建推薦的
7.初學懶人包：Install vue-router?這個問題開始就一直no no no
8.指令cd <project-name>，進入資料夾後再輸入npm install，安裝時請耐心等待～
9.裝完之後npm run dev
10.打開瀏覽器，進入http://localhost:8080 就可以看到歡迎畫面了

資料夾結構說明(有免費影片)

參考：Vue-cli 基礎入門 - 2018

• README.md 可以看到其它指令
• npm run dev(開發環境), npm run build(正式環境) 的 dev跟 build從哪來？去package.json看
• .babelrc .postcssrc.js .editorconfig 都是自動幫我們產出的設定檔
• build資料夾有webpack設定檔
• static是不會被編譯的檔案
• src資料夾是編輯後會編譯出來的檔案
  • 目錄下 main.js檔案會注入根目錄下 index.html
  • App.vue檔案裡包含 x-template javascript style
    執行npm run build會產出dist資料夾，需在server端運行

小結

免費影片：請自行前往udemy搜尋六角學院vue課程並找到Vue Cli章節
cli的操作參考：胡同筆記 Command Line Basics
筆者覺得安裝環境一直是很困難的一件事，想到當初為了學用pug sass上網爬了一堆gulp文，搞了五天才成功安裝，雖然最後也是搞不清所以然，在安裝環境及設定檔努力咬緊牙關撐過去吧！鐵人文也終於20天了撐過去吧！